@use "@/assets/styles/mixin";
:deep(.el-drawer) {
  @include mixin.flex-column;
  width: 840px !important;
  border-radius: 20px 0 0 20px;
  .el-drawer__header {
    border-bottom: 1px solid #dcdfe6;
    padding: 0;
    margin-bottom: 0px;
  }
  .el-drawer__close-btn {
    margin-right: 20px;
  }
  .el-drawer__body {
    padding: 0px;
  }
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: #3d3d3d;
  margin-bottom: 10px;
  span {
    font-size: 12px;
    color: #ea0000;
    font-weight: normal;
  }
}
.drawer-box {
  .drawer-header {
    padding: 20px;
  }
  .drawer-content {
    @include mixin.flex;
    height: 100%;

    .left-content {
      width: 50%;
      overflow-y: hidden;
      padding: 20px;
      box-sizing: border-box;
      border-right: 1px solid #dcdfe6;
      .work-information {
        height: 100%;
        overflow-y: auto;
        padding: 16px;
        box-sizing: border-box;
        background-color: #f6f8fa;
        .base-info {
          padding-bottom: 20px;
          margin-bottom: 20px;
          &__item {
            display: flex;
            justify-content: space-between;
            .label {
              color: #86909c;
              flex-shrink: 0;
            }
            .val {
              color: #1a1a1a;
              width: 50%;
              text-align: right;
            }
          }
        }
      }
      .base-info {
        border-bottom: 1px solid #dcdfe6;
        &__item {
          & + .base-info__item {
            margin-top: 17px;
          }
        }
      }
      .contract-situation {
        margin-bottom: 20px;
      }
      .material-list {
        .material-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          &__text {
            font-size: 14px;
            color: #3d3d3d;
            width: 80%;
          }
          &--disabled {
            color: #86909c;
          }
        }
      }
    }
    .right-content {
      width: 50%;
      overflow-y: auto;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .advance-tips{
        color: #ea0000;
        font-size: 12px;
      }
      :deep(.el-form) {
        margin-bottom: 30px;
        .el-form-item {
          display: block;
          margin-bottom: 10px;
        }
        .el-form-item__label {
          color: #86909c;
          font-size: 14px;
          width: 100%;
          display: block;
        }
        .el-input__wrapper,
        .el-textarea__inner {
          background: #f2f3f5;
          color: #86909c;
          box-shadow: none;
        }
        .el-checkbox__label {
          color: #191919;
        }
        .el-input__count{
          background: transparent;
        }
      }
      .button-action {
        text-align: center;
        button {
          width: 120px;
          height: 36px;
        }
      }
    }
  }
}